<!-- 字典数据选择 -->
<template>
	<uni-popup ref="popup" background-color="#fff" @change="onPopup">
		<view class="wrapper u-p-30">
			<view class="head">
				<u-search placeholder="搜索" @search="onSearch" @custom="onSearch" @clear="onClear" v-model="keyword"></u-search>
			</view>

			<view class="u-flex-1 body">

				<checkbox-group @change="radioGroupChange">
					<view class="   u-p-t-30  u-p-b-30   u-border-bottom " v-for="(item,index) in List">
						<label :key="item.id" @click="onLabel(item)">
							<view class="u-flex">
								<view class="">
									<checkbox color="#409EFF" :value="item.value" :checked="Value.includes(item.value)" />
								</view>
								<view class="">
									{{item.name}}
								</view>
							</view>
						</label>

					</view>
				</checkbox-group>
			</view>

			<view class="u-m-t-20 bottom">
				<HButton @click="onSubmit">确定</HButton>
			</view>
		</view>

	</uni-popup>


</template>
<script>
	import PopUp from '@/components/popup/index.vue'
	import HButton from '@/components/button/index.vue'
	import { dicList } from '@/filter/index.js'
	export default {
		components: {
			PopUp,
			HButton
		},
		props: {
			dicKey: {
				type: String,
				default: ""
			},
			value: {
				type: [String, Number, Array],
				default: ''
			}
		},
		computed: {
			List() {
				return this.filterList ? this.filterList : this.list
			},
			Value() {

				let checkVal = this.checkValue ? this.checkValue : this.value

				let val = checkVal instanceof Array ? checkVal : checkVal.toString().split(',')
				let vals = val.map((item) => String(item))
				return vals
			},
		},
		data() {
			return {
				keyword: '',
				checkLabel: [],
				checkValue: null,
				list: [],
				filterList: null
			}
		},

		methods: {
			init() {
				let res = dicList(this.dicKey)
				this.list = res
			},
			onLabel(item) {
				this.checkLabel.push({
					name: item.name,
					value: item.value
				})
			},
			onSubmit() {
				this.$emit('value', this.checkLabel)
				this.$refs.popup.close()
			},
			onPopup(ev) {
				if (ev.show) {
					this.keyword = ''
					this.checkValue = null
					this.init()
				} else {
					this.currentList = []
					this.list = []
					this.currentPosition = []
				}
			},
			openPopUp() {
				this.$refs.popup.open('bottom')
			},

			radioGroupChange(ev) {
				this.checkValue = ev.detail.value

			},
			onSearch(val) {
				this.filterList = this.list.filter((item) => item.name.indexOf(val) > -1);
			},
			onClear() {
				this.filterList = null

			}


		}



	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		background-color: #fff;
		height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.path {
		font-weight: 400;
		font-size: 28rpx;
		color: #98A5B3;

		&-text {
			color: #409EFF;

		}
	}

	.head {
		height: 10%;
	}

	.body {
		height: 80%;
		overflow: auto;
	}

	.bottom {
		height: 10%;
	}
</style>
